// 搜索引擎
const search = document.querySelector('.input')
  const box = document.querySelector('.ul')
  // 1. 给 search 绑定表单输入事件
  search.oninput = function () {
    // 2. 拿到文本框输入的内容
    const text = this.value
    // 3. 根据 text 关键字请求数据了
    // 3-1. 创建一个 script 标签
    const script = document.createElement('script')
    // 3-2. 手动设置 script 标签的 src 属性
    // 设置 script 标签的原生属性 src
    script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34099,33970,34004,33855,33607,26350,22159&wd=' + text + '&req=2&csor=5&pwd=aiqiyi&cb=fn&_=1623047595324'
    // 3-3. 把这个 script 标签插入到 body 内部
    //script.src = `https://suggest.taobao.com/sug?code=utf-8&q=${text}ksTS=1624176740363_352&callback=jsonp353&k=1&area=c2c&bucketid=6https://suggest.taobao.com/sug?code=utf-8&q=na&_ksTS=1624176907810_340&callback=jsonp341&k=1&area=c2c&bucketid=6`
    document.body.appendChild(script)
    // 3-4. script 标签的下场
    // 需要他的目的, 是为了利用 src 发送一个请求, 回来以后会执行 js 代码
    // 请求发送出去以后, 就没有用了
    script.remove()
  }
  // 4. 需要在全局准备一个 fn 函数
  function fn(res) {
    // res 就是后端返回给我的数据
    // 我就根据 res 去渲染页面
    // console.log(res)
    // 通过判断res 内是否有 g 这个数据
    // 来决定我是否渲染
    if (!res.g) {
      // 代码能执行到这里, 表示 res 内没有 g 这个数据
      // 让 ul 隐藏
      box.style.display = 'none'
      // 直接 return
      return
    }
    // 代码能来到这里
    // 说明 res 内的 g 是一个数组
    // 那么就循环数组渲染到 box 内部
    let str = ''
    res.g.forEach(item => {
      str += `<li>${ item.q }</li>`
    })
    box.innerHTML = str
    // 让 box 显示
    box.style.display = 'block'
  }

  //楼层
  $('.lou_ol>ol > li').click(function () {
    // 修饰之后
    window.scrollTo({
      top: $('.liu>p').eq($(this).index()).offset().top,
      behavior: 'smooth'
    })
  })
  // 2. 给 widnow 绑定 scroll 事件
  $(window).scroll(() => {
    // 2-2. 拿到浏览器卷去的高度
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    // 2-3. 循环遍历 ul 下面的每一个 li
    for (let i = 0; i < $('.liu>p').length; i++) {
      // 2-4. 判断哪一个 li 的高度小于页面卷去的高度了
      if ($('.liu>p').eq(i).offset().top <= scrollTop) {
        // 2-5. 给对应得 ol 下面的 li 添加类名
        $('.lou_ol>ol > li').eq(i).addClass('active').siblings().removeClass('active')   
      }
    }
  })
  // 3. 回到顶部
  $('.lou_ol>ol>li>button').click(() => {
    // window.scrollTo({ top: 0, behavior: 'smooth' })
    $('html').animate({
      scrollTop: 0
    }, 2000)
  })
  
  // 渲染页面
  
const baTu = document.querySelector('.ba_tu')
get()
 function get() {
  const script = document.createElement('script')
  script.src="https://list.mogu.com/search?callback=a&_version=8193&ratio=3%3A4&cKey=15&page=6&sort=pop&ad=0&fcid=50240&action=clothing&acm=3.mce.1_10_1ko4s.132244.0.yA8EpsAXgce0V.pos_871-m_482170-sd_119&ptp=31.v5mL0b._head.0.xJD3rJv9&_=1624263213812"
  document.body.appendChild(script)
  
}
function a(res) {
  
  const goodsDates=res.result.wall.docs;
  let str = ""
  goodsDates.forEach(function(item) {
    str +=` 
    <div class="tu">
    <div class="xihuan"><img src="${item.img}" alt=""></div>
   <h4>${item.title}</h4>
    <p>
        <span class="price">
            <em>￥</em>${item.price}
        </span>
        <span class="pople">${item.sale}</span>
    </p>
    <div class="zhe">
        <button>查找相似</button>
    </div>
 </div>
    
    `
  })
  baTu.innerHTML = str;
}
// 首页的逻辑

const id = window.localStorage.getItem('id')

// 1. 登录验证
loginTest()
function loginTest() {
  // 1-1. 拿到 localStorage 内的信息
  const token = window.localStorage.getItem('token')
  const onBox = document.querySelector('.on')
  const offBox = document.querySelector('.off')

  // 1-2. 判断 id 和 token 是否存在
  if (!id || !token) return

  // 1-3. 验证 token 的真实性
  // 发送一个需要 token 的请求
  // 因为刚好需要用到用户的个人信息
  ajax({
    url: 'http://localhost:8888/users/info',
    data: `id=${id}`,
    token: token,
    dataType: 'json',
    success (res) {
      // 1-4. 只有登录成功的时候, 才显示 onBox
      if (res.code === 1) {
        // 1-5. 修改一下文本内容
        onBox.firstElementChild.innerText = res.info.nickname
        onBox.classList.add('active')
        offBox.classList.remove('active')
      }
    }
  })
}
// 2. 注销登录
// 退出登录状态
// 方案1: 直接删除 localStorage 内的 id 和 token 信息
//   只是表示你当前页面处于一个未登录状态
//   不好
// 方案2: 告诉服务器, 我要退出
//   服务器会把当前 token 失效
const logoutBtn = document.querySelector('.logout')
logoutBtn.addEventListener('click', () => {

  // 2-1. 询问一下用户, 是否确认退出
  if (!window.confirm('您确认退出登录状态吗 ? ')) return

  // 2-2. 发送请求到服务器, 告诉他我退出了
  ajax({
    url: 'http://localhost:8888/users/logout',
    data: `id=${id}`,
    dataType: 'json',
    success (res) {
      // 2-3. 只要退出成功了, 那么直接刷新页面
      if (res.code === 1) window.location.reload()
    }
  })
})

// 二级菜单
// 跳转到列表页
const tz = document.querySelectorAll('.wu_zuo_div>ul')
for(let i = 0; i < tz.length; i++) {

tz[i].addEventListener('click', e => {
  e = e || window.event
  const target = e.target || e.srcElement
  if (target.tagName === 'LI') {
    window.location.href = "./list.html"
  }
})
}